<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space5">
                <table id="main-table"></table>
                <div id="treeTablePage"></div>
            </div>
        </div>
    </div>
</div>

<script th:inline="none"></script>
<script>
    layui.extend({
        treeTable: '{/}layuiadmin/plugins/treeTable/treeTable'
    });
    let categoryId = `[[${categoryId}]]`;
    var whr = {categoryId:categoryId};
    layui.use(['table','form','treeTable'], function(){
        var table = layui.table,
            treeTable = layui.treeTable,
            form = layui.form;
        var insTb =treeTable.render({
            elem: '#main-table',
            tree: {
                iconIndex: 1,
                idName: 'id',       // 自定义id字段的名称
                pidName: 'parentId',
                isPidData: true, // 是否是pid形式数据
                openName: 'categoryName'
            },
            checkboxCascade : 'none',
            cols: [
                {type: 'numbers'},
                {field: 'categoryName',title: "题库分类",width:300},
                {field: 'name', title: "章节名称",width:300}
                ,{align: 'center', toolbar: '#rowtools', title: '操作',width:90}
            ],
            height :(top.height-265)+"px",
            done:function(){


            },
            reqData: function (data, callback) {
                axios.get('chapter/getPageList',{params:queryParams(1)}).then(res=> {
                    if (res.data.code == 1) {
                        layer.msg(res.msg);
                    } else {
                        callback(res.data.data);
                        laypage.render({
                            elem: 'treeTablePage'
                            ,count: res.data.count
                            ,limit: limit
                            ,layout: ['prev', 'count','page', 'next', 'limit', 'skip']
                            ,jump: function(obj,first){
                                if(!first){
                                    axios.get('chapter/getPageList',{params:queryParams(obj.curr)}).then(res=> {
                                        if (res.data.code == 1) {
                                            layer.msg(res.msg);
                                        } else {
                                            callback(res.data.data);

                                        }
                                    });
                                }

                            }
                        });
                    }
                })
            },
            style: 'margin-top:0;'
        });

        function queryParams(page){
            whr.page = page;
            whr.limit = 20;
            return whr;
        }
        treeTable.on('tool(main-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'select'){
                let win = getTabWin('editwin');
                win.selectParentChapter(data);

                var index = top.layer.getFrameIndex(window.name);
                top.layer.close(index);
            }
        });

    });

</script>
<script type="text/html" id="rowtools">
    <a class="layui-btn layui-btn-xs" lay-event="select">选择</a>
</script>
</body>
</html>